<template>
  <div class="works_list">
    <van-row gutter="10" justify="space-between">
      <van-col
        v-for="item in list"
        :key="item.artistId"
        span="12"
        @click="handNavDetails(item.artistId)"
      >
        <div class="works_item">
          <img
            :src="$filters.prefix(item.artistPortrait)"
            alt=""
            class="works_img"
          />
          <div class="title_box">
            <div class="title">
              {{ item.artistName }}
            </div>
            <div class="head_name">
              <div class="name">
                {{ item.companyName }} | {{ item.artistPosition }}
              </div>
            </div>
          </div>
          <div class="btn_num">
            <div class="num">{{ item.ticketNumber }}票</div>
            <van-button
              @click.stop="handVote(item.artistId)"
              style="width: 100%"
              size="small"
              color="#BF1425"
              >投票</van-button
            >
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRef, toRefs } from "vue";
import { useRouter } from "vue-router";
import { votePc } from "@/utils/apis/home";
import { customizeId } from "@/utils/config";
import { Toast } from "vant";
export default defineComponent({
  name: "NavBar",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  setup() {
    const state = reactive({});
    //路由
    const router = useRouter();
    const handNavDetails = (id: number) => {
      if (id) {
        router.push({
          path: "/people",
          query: {
            id,
          },
        });
      }
    };
    const handVote = async (id: number) => {
      const res = await votePc({
        customizeId,
        artistId: id,
      });
      Toast.success(res.content);
    };
    return { ...toRefs(state), handNavDetails, handVote };
  },
});
</script>
<style lang="scss" scoped>
.works_list {
  .works_item {
    background: #ffffff;
    box-shadow: 0 0 13px 0 rgba(18, 27, 83, 0.08);
    border-radius: 6px;
    padding-bottom: 15px;
    margin-bottom: 10px;
  }
  .btn_num {
    text-align: center;
    padding: 0 13px;
    .num {
      font-size: 14px;
      color: #333333;
      font-weight: 600;
      margin-bottom: 8px;
    }
  }
  .title_box {
    padding: 0 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
    margin-bottom: 10px;
    .head_name {
      display: flex;
      align-items: center;
      .name {
        font-size: 13px;
        color: #666;
        @include ellipsis();
      }
      .head_img {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        margin-right: 3px;
      }
    }
    .title {
      font-size: 14px;
      color: #312d2d;
      font-weight: 600;
      margin: 10px 0 4px 0;
      width: 144px;
      @include ellipsis();
      text-align: center;
    }
  }
  .works_img {
    width: 100%;
    height: 110px;
    object-fit: cover;
  }
}
</style>
